<template>
  <el-card class="dir-wrapper box-card">
    <div class="title">目录</div>
    <ul class="anchor-list">
      <li v-for="(anchor, index) in titles" :key="anchor" class="anchor-item" :class="isActive(index)"
        :style="{ 'padding-left': `${anchor.indent * 16}px` }" @click="handleAnchorClick(anchor, index)">
        {{ anchor.title }}
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  name: 'DirectoryCard',
  props: {
    titles: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: -1
    }
  },
  methods: {
    handleAnchorClick(anchor, index) {
      this.activeIndex = index
      this.$emit('anchor', anchor)
    },
    isActive(index) {
      return this.activeIndex === index ? 'active' : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dir-wrapper {
  .title {
    font-weight: bold;
    font-size: 14pt;
    // border-bottom: solid 1px black;
    padding-bottom: 14px;
  }

  .anchor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 10px;

    .anchor-item {
      cursor: pointer;
      padding: 6px 0;

      &:hover {
        text-shadow: 0 0 1px #323130;
      }

      &.active {
        // --el-color-primary-dark-2
        color: var(--el-color-primary);
        text-shadow: 0 0 1px var(--el-color-primary);
      }
    }
  }
}
</style>
